<template>
	<view>
		<view class="status_bar" ></view>
		<view class="chat">
			
			<view class="chat__top">
				
				 <u-tabs-swiper class="chat__top__tabs"
				 ref="uTabs" :list="chatData" :current="tabsCurrent" @change="tabsChange" :is-scroll="false"
		
				  ></u-tabs-swiper>
				  <view class="chat__top__search">
					  <u-icon name="search">
						  
					  </u-icon>
				  </view>
				
			</view>
			<swiper :current="tabsSwiperCurrent" @transition="transition" @animationfinish="animationfinish"
				>
				<swiper-item class="chat__list" v-for="(messageTypeList,index) in chatData" :key="index" >
					<scroll-view scroll-y  @scrolltolower="onreachBottom">
						<v-messageBox class="chat__list__messgae-box"
							:pic="messgae.pic" 
							:userfrom="messgae.userfrom"
							:message="messgae.message"
							:time="messgae.time"
							v-for="(messgae,index) in messageTypeList.chatlist">
							
						</v-messageBox>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>


		<u-tabbar :list="this.$store.state.tabbarList" 
			:active-color="this.$store.state.tabbarConfig.activeColor"
			:inactive-color="this.$store.state.tabbarConfig.inactiveColor"
			:border-top="this.$store.state.tabbarConfig.borderTop"	></u-tabbar>
	</view>
</template>

<script>

	import messageBox from "../../../component/messagebox.vue"
	import chatData from "./chatData.js"
	export default {
		components:{
			'v-messageBox':messageBox,
		},
		data() {
			return {
				chatData:chatData.chatData,
				tabsCurrent:0,
				tabsSwiperCurrent:0,

			}
		},
		methods: {
			tabsChange(index) {
				this.tabsSwiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.tabsSwiperCurrent = current;
				this.tabsCurrent = current;

			},
			onreachBottom() {
			},
			toSearch(){
				console.log("pp")
				 uni.navigateTo({
					 url:"/pages/core/service/serverSearch",
					 fail: (res) => {
						 console.log(res)
					 }
				 })
			}
		}
	}
</script>


<style lang="less">
.chat{
	
	&__top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-top: 5rpx;
		font-weight: bold;
		// box-shadow: 0px 1px 5px #c2c2c2;
		&__tabs{
			width: 80%;
		}
		&__search{
			margin-right: 20px;
		}
	}
	&__list{
		&__message-box{
			margin: 20px 10px;
		}
	}
}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}
</style>
